<template>
  <div>
    <el-dialog
      title="确认框"
      :visible="dialogVisible"
      :show-close="false"
      width="500px"
    >
      <div class="message-text">信息无误确认保存</div>
      <span slot="footer">
        <el-button
          @click="handleCancel"
        >
          取 消
        </el-button>
        <el-button
          type="primary"
          @click="handleConfirm"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ConfirmDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleCancel() {
      this.$emit('cancel-dialog')
    },
    handleConfirm() {
      this.$emit('confirm-dialog')
    }
  }
}
</script>

<style scoped>
  .message-text {
    text-align: center;
    font-size: 18px;
  }
</style>
